<template>
  <div>
    <!--创建班级对话框 -->
    <el-dialog
      title="创建班级"
      v-model="dialogVisible"
      :close-on-click-modal="false"
      @close="resetForm"
    >
      <el-form :model="form" :rules="rules" ref="createForm">
        <el-form-item label="所属学院" prop="college" label-width="80px">
          <el-input
            v-model="form.college"
            placeholder="请输入所属学院"
          ></el-input>
        </el-form-item>
        <el-form-item label="班级编号" prop="classNo" label-width="80px">
          <el-input
            v-model="form.classNo"
            placeholder="请输入班级编号"
          ></el-input>
        </el-form-item>
        <el-form-item label="班级名称" prop="className" label-width="80px">
          <el-input
            v-model="form.className"
            placeholder="请输入班级名称"
          ></el-input>
        </el-form-item>
        <el-form-item label="班级描述" prop="classDesc" label-width="80px">
          <el-input
            type="textarea"
            :autosize="{ minRows: 2, maxRows: 4 }"
            v-model="form.classDesc"
            placeholder="请输入班级描述"
          ></el-input>
        </el-form-item>
        <el-form-item label="成立日期" prop="establishTime" label-width="80px">
          <el-date-picker
            type="date"
            placeholder="选择成立日期"
            size="large"
            v-model="form.establishTime"
			value-format="YYYY-MM-DD"
          ></el-date-picker>
        </el-form-item>
      </el-form>
      <span class="dialog-footer">
        <el-button @click="resetForm">重填</el-button>
        <el-button type="primary" @click="submitForm">创建</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script setup>
import { ElMessage } from "element-plus";
import { reactive, toRefs, ref, defineEmits } from "vue";
const emit = defineEmits(['refresh']);
import { nations, polities } from "@/config/index.js";
import api from "@api/index.js";
const data = reactive({
  dialogVisible: false, // 控制对话框的显示状态
  //表单字段
  form: {
    college: "",
    classNo: "",
    className: "",
    classDesc: "",
    establishTime: "",
  },
  //验证规则
  rules: {
    college: [
      {
        required: true,
        message: "请输入学院",
        trigger: "blur",
      },
    ],
    classNo: [
      {
        required: true,
        message: "请输入班级编号",
        trigger: "blur",
      },
    ],
    className: [
      {
        required: true,
        message: "请输入班级名称",
        trigger: "blur",
      },
    ],
    establishTime: [
      {
        required: true,
        message: "请选择成立日期",
        trigger: "blur",
      },
      {
        validator: (rule, value) => {
          if (value && value <new Date()) {
            return false;
          } else {
            return true;
          }
        },
        message: "成立日期不能晚于当前日期",
        trigger: "blur",
      },
    ],
  },
});
//创建班级表单组件实例
let createForm = ref(null);
let { dialogVisible, form, rules } = toRefs(data);
//提交form表单
const submitForm = () => {
  createForm.value.validate(async (valid) => {
    if (valid) {
	  console.info(form.value);
      let data = { ...form.value };
			api.classInfo.create(data).then(res=>{console.info(res);}).catch(error=>{
				ElMessage({message:error.message,type:"error"})
			});
/* 
      let responseData = await api.classInfo.create(data);
			console.info(responseData);
      if (200 != responseData.code) {
        ElMessage({ message: responseData.message, type: "error" });
        return false;
      }
      let rows = responseData.data;
      if (1 === rows) {
        ElMessage({
          message: "创建成功",
          type: "success",
          duration: 2000,
          onClose: () => {
            dialogVisible.value = false; // 关闭对话框
            //刷新父模块
            emit("refresh");
          },
        });
      } else {
        ElMessage({ message: "服务器返回未知操作状态", type: "warning" });
      }
  */  } else {
      console.log("表单验证失败!");
      return false;
    }
  });
};

//重置表单
const resetForm = () => {
  createForm.value.resetFields();
};
defineExpose({ dialogVisible });
</script>


<style scoped>
/* 样式可以根据需要自定义 */
</style>